<!DOCTYPE html>
<html lang="en">
<head><!-- 文档元信息：给浏览器、搜索引擎等机器阅读 -->
    <!-- 文档字符编码格式 -->
    <meta charset="UTF-8" />
    <!-- 移动端事实标准 -->
    <meta name="viewport" content="width=1024" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 文档标题 -->
    <title>怎样使用AntV X6图编辑引擎实现LiteFlow逻辑可视化编排</title>
    <meta name="description" content="怎样使用AntV X6图编辑引擎实现LiteFlow可视化编排" />
    <meta name="author" content="王士江" />
    <link href="css/impress-demo.css" rel="stylesheet" />
    <link href="css/impress-common.css" rel="stylesheet" />
    <link rel="shortcut icon" href="assets/liteflow-logo.png" />
    <link rel="apple-touch-icon" href="apple-touch-icon.png" />
</head>

<body class="impress-not-supported"><!-- 文档内容：给人阅读 -->
<!--
    This fallback message is only visible when there is `impress-not-supported` class on body.
-->
<div class="fallback-message">
    <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
    <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>
<div class="slide-background">
    <div class="slide-background-content"></div>
</div>
<!-- HTML PPT 标记 -->
<div id="impress"
    data-transition-duration="300"
    data-width="1024"
    data-height="768"
    data-max-scale="9"
    data-min-scale="0"
    data-perspective="1000"
    >
    <!-- HTML PPT 容器 -->
    <div id="overview" class="step" data-x="3000" data-y="1500" data-z="0" data-scale="10"></div>
    
    <!-- HTML PPT 容器 -->
    <div id="title" class="step" data-x="3000" data-y="1500" data-z="0" data-scale="10">
        <p>怎样使用<strong class="topic">AntV X6</strong>图编辑引擎</p>
        <p>实现<strong class="topic">LiteFlow</strong>逻辑可视化编排</p>
    </div>

    <div id="x6" class="step main-topic" data-x="2700"  data-y="1000"  data-scale="7">
        <h1>
            AntV X6
            <img class="underline" src="./assets/long-underline.png" />
        </h1>
        <img class="stubby-arrow top" src="./assets/stubby-arrow.png" />
    </div>

    <div id="core-concepts" class="step" data-x="2400"  data-y="0"  data-scale="3">
        <h1>
            5个核心要素
            <img class="underline" src="./assets/double-underline.png" />
        </h1>
    </div>

    <div id="node" class="step slide" data-x="400"  data-y="-300"  data-rotate-z="-45">
        <h1>节点</h1>
        <div>
            <img src="./assets/x6-node.png" />
        </div>
    </div>

    <div id="edge" class="step slide" data-x="1350"  data-y="-830" data-rotate-z="-15">
        <h1>连线</h1>
        <div>
            <img src="./assets/x6-edge.png" />
        </div>
    </div>

    <div id="label" class="step slide" data-x="2400"  data-y="-980" data-rotate-z="0">
        <h1>标签</h1>
        <div>
            <img src="./assets/x6-label.png" />
        </div>
    </div>

    <div id="layout" class="step slide" data-x="3450"  data-y="-830" data-rotate-z="15">
        <h1>布局</h1>
        <div>
            <img src="./assets/x6-layout.png" />
        </div>
    </div>

    <div id="event" class="step slide" data-x="4400"  data-y="-300" data-rotate-z="45">
        <h1>事件</h1>
        <div>
            <img src="./assets/x6-custom-events.png" />
        </div>
    </div>

    <div id="liteflow" class="step main-topic" data-x="1500"  data-y="2000"  data-scale="7">
        <h1>
            LiteFlow
            <img class="underline" src="./assets/long-underline.png" />
        </h1>
        <img class="stubby-arrow bottom" src="./assets/stubby-arrow.png" />
    </div>

    <div id="mvc" class="step" data-x="1000"  data-y="3300"  data-scale="3">
        <h1>
            MVC
            <img class="underline" src="./assets/double-underline.png" />
        </h1>
    </div>

    <div id="model" class="step slide" data-x="-200"  data-y="3600" data-rotate-z="45">
        <h1>模型<span class="secondary">(Model)</span></h1>
        <div>
            <img src="./assets/LiteFlow逻辑可视化编排-ELNode模型-组合关系vs继承关系.png" />
        </div>
    </div>

    <div id="view" class="step slide" data-x="1000"  data-y="4100" data-rotate-z="0">
        <h1>视图<span class="secondary">(View)</span></h1>
        <div>
            <img src="./assets/LiteFlow逻辑可视化编排-Chain设计.png" />
        </div>
    </div>

    <div id="control" class="step slide" data-x="2200"  data-y="3600" data-rotate-z="-45">
        <h1>交互<span class="secondary">(Control)</span></h1>
        <div>
            <img src="./assets/LiteFlow逻辑可视化编排-操作逻辑篇（Control）-增删改查CRUD.png" />
        </div>
    </div>
</div>

<div id="impress-toolbar"></div>
<div class="hint">
    <p>Use a spacebar or arrow keys to navigate. <br/>
       Press 'P' to launch speaker console.</p>
</div>
<script>
if ("ontouchstart" in document.documentElement) { 
    document.querySelector(".hint").innerHTML = "<p>Swipe left or right to navigate</p>";
}
</script>

<script src="js/impress.js"></script>
<script>
    var ppt = impress(); // 1. 生成PPT实例
    ppt.init(); // 2. 初始化PPT
    // 3. 添加键盘事件
    document.addEventListener('keypress', function (event) {
        if(
            event.keyCode === 13 || 
            event.code === 'Enter' ||
            event.keyCode === 27 ||
            event.code === 'Escape'
        ) {
            ppt.goto('overview');
        }
    });
</script>
</body>
</html>
